<template>
	<view class="">
		<hx-navbar :back="false" :backgroundColor="[255, 255, 255]" color="#fff" transparent="hidden" :fixed="true">
			<view slot="left" class="flex justify-center align-center container-top" style="width:100%;margin: 0 45rpx;">
				<view class="cuIcon-back" style="font-size: 36rpx;position: absolute;left: 30rpx;" @tap="back">
				</view>
				<view class="" style="font-size: 36rpx;">
					会员中心
				</view>
				<view class="flex align-center" style="position: absolute;right: 30rpx;">
					<i class="fa fa-share-alt" style="font-size: 40rpx;" aria-hidden="true"></i>
				</view>
			</view>
		</hx-navbar>
		<view class="beiji">
			<image src="../../static/imgs/vipbeiji.png" mode="widthFix"></image>
		</view>
		<view class="">
			<view class="flex touxian">
				<view class="hytouxian">
					<image src="../../static/imgs/hytouxian.png" mode="aspectFill"></image>
				</view>
				<view class="flex flex-direction justify-around">
					<view class="" style="font-size: 36rpx;">
						戴永明<text class="tag">子爵会员</text>
					</view>
					<view class="" style="font-size: 24rpx;">
						180****1589
					</view>
				</view>
			</view>
			<view class="" style="margin: 0 20rpx;">
				<swiper class="swiper" indicator-dots="true" :interval="interval" :duration="duration" circular="true">
				   <block v-for="(item,i) in banner" :key="i">
					<swiper-item>
						<image src="../../static/imgs/vipdj.png" mode="aspectFill"></image>
						<view class="" style="position: relative;z-index: 3;">
							<view class="flex justify-between card">
								<view class="">
									<view class="vipname">
										子爵
									</view>
									<view class="vipjs">
										开通子爵会员，享受专属服务
									</view>
								</view>
								<view class="">
									<view class="heaven">
										距离到期：256天
									</view>
									<button type="default" class="open">已开通</button>
								</view>
							</view>
						</view>
					</swiper-item>
				   </block>
				</swiper>
			</view>
			<view class="rights margins">
				<view class="title">
					子爵会员专属权益
				</view>
				<view class="flex justify-between flex-wrap">
					<view class="rights-box flex flex-direction justify-center">
						<view class="name text-bold">
							发布供应
						</view>
						<view class="sulian">
							100条
						</view>
						<view class="index">
							01
						</view>
					</view>
					<view class="rights-box flex flex-direction justify-center">
						<view class="name text-bold">
							发布求购
						</view>
						<view class="sulian">
							不限
						</view>
						<view class="index">
							02
						</view>
					</view>
					<view class="rights-box flex flex-direction justify-center">
						<view class="name text-bold">
							每日供应信息刷新
						</view>
						<view class="sulian">
							5条
						</view>
						<view class="index">
							03
						</view>
					</view>
					<view class="rights-box flex flex-direction justify-center">
						<view class="name text-bold">
							供应信息排名
						</view>
						<view class="sulian">
							免费会员前
						</view>
						<view class="index">
							04
						</view>
					</view>
					<view class="rights-box flex flex-direction justify-center">
						<view class="name text-bold">
							查看求购联系电话
						</view>
						<view class="sulian">
							不限
						</view>
						<view class="index">
							05
						</view>
					</view>
					<view class="rights-box flex flex-direction justify-center">
						<view class="name text-bold">
							查看求购联系电话
						</view>
						<view class="sulian">
							不限
						</view>
						<view class="index">
							06
						</view>
					</view>
				</view>
			</view>
			<view class="more margins">
				<view class="title">
					更多特权
				</view>
				<view class="prerogative flex justify-between align-center">
					<view class="prerogative-box flex">
						<view class="img-text">
							<i class="fa fa-user-secret" aria-hidden="true"></i>
						</view>
						<view class="">
							<view class="name">
								实名认证
							</view>
							<view class="explain">
								认证您的有效身份
							</view> 
						</view>
					</view>
					<view class="attestation">
						<button type="default" class="certified">已认证</button>
					</view>
				</view>
				<view class="prerogative flex justify-between align-center">
					<view class="prerogative-box flex">
						<view class="img-text">
							<i class="cuIcon-shopfill"></i>
						</view>
						<view class="">
							<view class="name">
								企业认证
							</view>
							<view class="explain">
								认证您的企业执照
							</view> 
						</view>
					</view>
					<view class="attestation">
						<button type="default">去认证</button>
					</view>
				</view>
				<view class="prerogative flex justify-between align-center">
					<view class="prerogative-box flex">
						<view class="img-text">
							<i class="fa fa-fire" aria-hidden="true"></i>
						</view>
						<view class="">
							<view class="name">
								上热门
							</view>
							<view class="explain">
								让您的产品上首页热门
							</view> 
						</view>
					</view>
					<view class="attestation">
						<button type="default">去申请</button>
					</view>
				</view>
			</view>
			<view class="upgrade flex justify-between align-center">
				<view class="upgrade-img">
					<image src="../../static/imgs/vipshengji.png" mode="widthFix"></image>
				</view>
					<view class="" style="color: #3E3835;">
						<text>￥</text>
						<text class="last">149</text>
						<text>/年</text>
						<text class="price">￥189</text>
					</view>
					<view class="promptly">
						立即升级
					</view>
			</view>
		</view>
	</view>
</template>

<script>
import 'static/css/font-awesome.min.css';
export default {
	    data() {
	        return {
            banner: ['color1', 'color2', 'color3'],
            interval: 2000,
            duration: 500,
	        };
	    },
	    methods: {
        back(){
			    uni.navigateBack({
			    });
        },
    },
};
</script>

<style>
	.beiji{
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	}
	.beiji image{
		width: 100%;
	}
	.touxian{
		padding: 35rpx;
	}
	.hytouxian{
		width: 101rpx;
		height: 101rpx;
		border-radius: 50%;
		border: 4rpx #9C9B9C solid;
	}
	.hytouxian image{
		width: 100%;
		height: 100%;
	}
	.touxian .flex{
		margin-left: 25rpx;
		color: #FFFFFF;
	}
	.swiper{
		height: 360rpx;
	}
	.swiper image{
		width: 100%;
		height: 84%;
		border-radius: 30rpx;
		position: absolute;
		box-shadow: 0px 7px 10px #EBEBEB;
	}
	.tag{
		width: 98rpx;
		height: 30rpx;
		border-radius: 5rpx;
		color: #6F7177;
		font-size: 20rpx;
		padding: 4rpx 10rpx;
		margin-left: 12rpx;
		background-image: linear-gradient(to,right, #D7D7DC , #E1E2E6);
	}
	.card{
		padding: 100rpx 25rpx 90rpx 30rpx;
	}
	.card .vipname{
		font-size: 48rpx;
		color: #2F2B29;
		margin-bottom: 15rpx;
	}
	.card .vipjs{
		font-size: 26rpx;
		color: #676767;
	}
	.card .heaven{
		font-size: 24rpx;
		color: #252426;
		margin-bottom: 15rpx;
		font-weight: bold;
	}
	.card .open{
		width: 186rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #7C7878;
		font-size: 28rpx;
		border-radius: 50rpx;
	}
	.margins{
		margin: 0 20rpx;
	}
	.margins .title{
		margin: 50rpx 0;
		font-size: 36rpx;
		color: #222222;
		font-weight: bold;
	}
	.rights-box{
		width: 316rpx;
		height: 153rpx;
		border-radius: 20rpx;
		margin-left: 25rpx;
		position: relative;
	}
	.rights-box .name{
		font-size: 28rpx;
		color: #222222;
		margin-bottom: 15rpx;
	}
	.rights-box .sulian{
		font-size: 24rpx;
		color: #9B9B9B;
	}
	.rights-box .index{
		position: absolute;
		bottom: 10rpx;
		right: 20rpx;
		font-size: 72rpx;
		font-style:italic;
		color: #DDDEE0;
	}
	.more{
		margin-bottom: 189rpx;
	}
	.prerogative{
		margin-bottom: 55rpx;
	}
	.prerogative-box .img-text{
		width: 68rpx;
		height: 68rpx;
		line-height: 66rpx;
		text-align: center;
		border-radius: 50%;
		border: 4rpx #CB9A58 solid;
		margin-right: 26rpx;
		font-size: 40rpx;
		color: #CB9A58;
	}
	.prerogative-box .fa-user-secret{
		padding-left: 4rpx;
	}
	.prerogative-box .name{
		font-size: 30rpx;
		color: #222;
		font-weight: bold;
		margin-bottom: 6rpx;
	}
	.prerogative-box .explain{
		font-size: 24rpx;
		color: #989898;
	}
	.prerogative button{
		width: 100rpx;
		height: 50rpx;
		border-radius: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 22rpx;
		background-color: #333;
		padding:0 9rpx;
	}
	.prerogative .certified{
		background-color: #CDD1D4;
	}
	.upgrade{
		width: 602rpx;
		height: 97rpx;
		border-radius: 50rpx;
		position: fixed;
		bottom: 40rpx;
		left: 0;
		right: 0;
		margin: auto;
		padding: 0 55rpx;
	}
	.upgrade .upgrade-img{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.upgrade .upgrade-img image{
		width: 100%;
	}
	.upgrade .promptly{
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.upgrade .last{
		font-size: 61rpx;
		font-weight: bold;
	}
	.upgrade .price{
		margin-left: 5rpx;
		text-decoration: line-through;
	}
</style>
